<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setInterval Example</title>
</head>
<body>
    <p id="counter">计数器:0</p>
    <button>更新文本颜色</button>
</body>
</html>
<!--  
    1、当按钮被点击时，使用setTimeout函数延迟3秒钟后改变段落文本的颜色为红色。
    2、使用setInterval函数每秒钟更新一次计数器的值，并在段落文本中显示，要求在10秒钟后停止。
-->
<script>
    var counter = 0;
    var counterElement = document.getElementById('counter');
    let button=document.querySelector('button')
    // 设置一个定时器，每1000毫秒（1秒）执行一次  
    button.onclick=function(){
        setTimeout(() => {
            counterElement.style.color='red'
        }, 3000);
    }
    var intervalId = setInterval(function () {
        counter++;
        counterElement.textContent = '计数器：' + counter;
        // 假设我们想在计数器达到10时停止它 
        if(counter===10){
        clearInterval(intervalId);
     } 
    }, 1000);
     
</script>